.exercise-agree-cell {
  display: flex;
  align-items: stretch;
  justify-content: center;
  color: white;
  border-radius: 2px;
  cursor: pointer;
  opacity: 0.2;

  &[data-active=true] {
    opacity: 1;
  }

  &:active {
    opacity: 0.75;
  }

  & > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    box-sizing: border-box;
  }

  & > i {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
  }

  & > span {
    padding: 0 4px;
    margin: 0 1px;
  }

  & > div {
    display: flex;
    flex-direction: column;
    font-size: 12px;

    & > .pl-icon {
      width: 100%;

      &:hover {
        opacity: 0.5;
      }

      &:first-child {
        border-top-right-radius: 2px;
        padding-top: 2px;
      }

      &:last-child {
        border-bottom-right-radius: 2px;
        padding-bottom: 2px;
      }
    }
  }
}
